<template>
  <div class="register-box">
    <h1 style="text-align: center;">欢迎来到靠谱</h1>
    <el-card class="register-form">

      <h2>注册账号</h2>
      <el-form ref="form"
               :model="registerFrom"
               label-width="80px"
      style="text-align: center;
              height: 150px;
              padding-top: 50px">
        <span>用户账号：</span>
        <el-input v-model="registerFrom.loginName"
                  style="width: 200px"
                  placeholder="请输入用户账号"></el-input>
        <br>
        <span>密码：</span>
        <el-input v-model="registerFrom.password"
                  style="width: 150px;margin-top: 20px"
                  placeholder="请输入用户密码"></el-input>
<!--        <span>&emsp;<el-link href="#">获取验证码</el-link></span>-->
      </el-form>
      <el-divider></el-divider>
      <el-checkbox v-model="checked"><font size="1px">我已阅读并且同意靠谱《用户协议》和《隐私政策》</font></el-checkbox>
      <el-button
          @click="register"
          style="margin-left: 90px;
                          width: 150px;
                          margin-top: 30px;
                          margin-bottom: 20px;
                          ">注册账号
      </el-button>
      <div style="margin-left: 100px">
        已有帐号？立即<el-link href="/login"><font style="font-size: large">登录</font></el-link>
      </div>
    </el-card>

  </div>
</template>

<script>
export default {
  name: "register",
  data(){
    return {
      // 这是注册表单的数据绑定对象
      registerFrom: {
        loginName: '123456789',
        password: '1234'
      },
    }
  },
  methods: {
    async register() {
      console.log('用户注册')
      const {data: res} = await this.$http.post(
          process.env.VUE_APP_SERVER + 'user/register',
          this.registerFrom)
      console.log(res.message)
      if (res.message==="success"){
        console.log(res.data)
        console.log('注册成功')
        this.$router.push({path:'/login'})
      }
    }
  }
}
</script>

<style scoped>
.register-form{
  width: 395px;
  height: 480px;
  margin: auto auto;
}
.register-box{
  background: url('https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2883480529,3855223479&fm=26&gp=0.jpg') no-repeat;
  width: 1200px;
  height: 545px;
  background-size: 100% 100%;
}
</style>